<template>
  <div class="content_box">
    <div class="home-content-box">
      <div class="home-head">
        <div class="user-msg">
          <div class="tx">
            <img src="@/assets/home-tx.png" alt="" />
            <p>李晓波<span>民警</span></p>
          </div>
          <div class="ts-msg">
            <p class="title">下午好，欢迎登录！</p>
            <p class="text">南岸区分局花园派出所</p>
          </div>
        </div>
      </div>

      <div class="tab-box">
        <div class="tab">
          <div class="on">
            <p>保释金缴费任务进度</p>
            <p class="line"></p>
          </div>
          <div>
            <p>保释金缴费任务进度</p>
            <p class="line"></p>
          </div>
          <div>
            <p>保释金缴费任务进度</p>
            <p class="line"></p>
          </div>
        </div>
      </div>

      <div class="nr-box">
        <div class="list" v-for="item in 3">
          <div class="aj_msg">
            <p class="jiao">缴<span class="new">新</span></p>
            <div class="name">
              <p class="title">案件名称：重庆西南贷款投资公司涉嫌骗取贷款</p>
              <p class="text">案件编号：x5001056200002125456</p>
              <p class="text">嫌疑人：张文</p>
              <div class="label">
                <el-tag style="margin-right: 8px">待办取保</el-tag>
                <el-tag>缴费中</el-tag>
              </div>
            </div>
          </div>

          <div class="progress">
            <div class="box on">
              <div class="node">
                <p class="text_t">提交缴费申请</p>
                <p>
                  <img class="node-icon1" src="@/assets/node.png" alt="" />
                </p>

                <div class="time-line">
                  <img src="@/assets/time_line.png" alt="" />
                  <div>
                    <p>2024-03-08 10:30:16</p>
                    <p>2024-03-08 10:31:22</p>
                  </div>
                </div>
              </div>
              <div class="line-c-box">
                <div class="line-box">
                  <p class="line"></p>
                  <p class="text">缴费金额：¥2000</p>
                </div>
              </div>
            </div>

            <div class="box">
              <div class="node">
                <p class="text_t">待缴费</p>
                <p>
                  <img class="node-icon2" src="@/assets/on_node.png" alt="" />
                </p>
                <div class="time-line">
                  <img src="@/assets/time_line.png" alt="" />
                  <div>
                    <p>2024-03-08 10:30:16</p>
                    <p>2024-03-08 10:31:22</p>
                  </div>
                </div>
              </div>
              <div class="line-c-box">
                <div class="line-box">
                  <p class="line"></p>
                  <p class="text">缴费金额：¥2000</p>
                </div>
              </div>
            </div>

            <div class="box">
              <div class="node">
                <p class="text_t">已缴费</p>
                <p>
                  <img class="node-icon2" src="@/assets/on_node.png" alt="" />
                </p>
                <div class="time-line">
                  <img src="@/assets/time_line.png" alt="" />
                  <div>
                    <p>2024-03-08 10:30:16</p>
                    <p>2024-03-08 10:31:22</p>
                  </div>
                </div>
              </div>
              <div class="line-c-box">
                <div class="line-box">
                  <p class="line"></p>
                  <p class="text">缴费金额：¥2000</p>
                </div>
              </div>
            </div>

            <div class="box">
              <div class="node">
                <p class="text_t">已完成</p>
                <p>
                  <img class="node-icon2" src="@/assets/on_node.png" alt="" />
                </p>
                <div class="time-line">
                  <img src="@/assets/time_line.png" alt="" />
                  <div>
                    <p>2024-03-08 10:30:16</p>
                    <p>2024-03-08 10:31:22</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="gn-box">
        <div class="box">
          <p class="title">常用功能</p>
          <div class="icon-box">
            <div>
              <img src="@/assets/home-gn-icon1.png" alt="" />
              <p>帮助中心</p>
            </div>
            <div>
              <img src="@/assets/home-gn-icon2.png" alt="" />
              <p>缴费台账</p>
            </div>
            <div>
              <img src="@/assets/home-gn-icon3.png" alt="" />
              <p>取保管理</p>
            </div>
            <div>
              <img src="@/assets/home-gn-icon4.png" alt="" />
              <p>退款账台</p>
            </div>
          </div>
        </div>
        <div class="box tips">
          <p class="title">待办提醒</p>
          <div class="tips-box">
            <div>
              <img src="@/assets/home-gn-icon5.png" alt="" />
              <div>
                <p class="num">8</p>
                <p class="text">待对账（笔）</p>
              </div>
            </div>
            <div>
              <img src="@/assets/home-gn-icon6.png" alt="" />
              <div>
                <p class="num">23</p>
                <p class="text">待核销（笔）</p>
              </div>
            </div>
            <div>
              <img src="@/assets/home-gn-icon7.png" alt="" />
              <div>
                <p class="num">8</p>
                <p class="text">待罚没（笔）</p>
              </div>
            </div>
            <div>
              <img src="@/assets/home-gn-icon8.png" alt="" />
              <div>
                <p class="num">0</p>
                <p class="text">异常退费（笔）</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tj-box">
        <div class="title">
          <img src="@/assets/home-tj-icon.png" alt="" />
          <p>取保金额统计</p>
        </div>
        
        <div class="tab">
          <p class="on">缴费</p>
          <p>退费</p>
          <p>罚没</p>
        </div>

        <div class="charts" ref="line"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
import * as echarts from "echarts";

//获取图形图标的节点
let line = ref();
onMounted(() => {
  let mycharts = echarts.init(line.value);
  //设置配置项
  mycharts.setOption({
    title: {
      subtext: "金额/元",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: 40,
      top: 50,
      right: 20,
      bottom: 20,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["06/8", "06/8", "06/8", "06/8", "06/8", "06/8", "06/8"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "预购",
        type: "line",
        smooth: true,
        data:[500, 300, 400, 600, 260, 830, 710],
        itemStyle: {
          normal: {
            color: '#7579E7',
            lineStyle: {
              width: 6 // 设置线条粗细为3像素
            }
          }
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#d4d5ee", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#ffffff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  });
});
</script>
<style scoped lang="scss">
.home-content-box {
}

.home-head {
  width: 100%;
  height: 250px;
  background: url(../../assets/home_img1.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;

  .user-msg {
    margin-left: 60px;
    display: flex;
    align-items: center;

    .tx {
      text-align: center;
      margin-right: 70px;
    }

    img {
      width: 100px;
      height: 100px;
    }

    p {
      font-size: 20px;
      color: #fff;
      margin-top: 10px;

      span {
        display: inline-block;
        border-radius: 5px;
        border: 1px solid #98ffff;
        font-size: 16px;
        color: #98ffff;
        padding: 2px 6px;
        margin-left: 10px;
      }
    }

    .ts-msg {
      color: #ffffff;

      .title {
        font-size: 26px;
        font-weight: 500;
        margin-bottom: 30px;
      }

      .text {
        font-size: 20px;
        color: #e6ecff;
      }
    }
  }
}

.tab-box {
  margin-top: 29px;

  .tab {
    display: flex;
    font-size: 16px;
    font-weight: 500;
    color: #222222;

    div {
      margin-right: 70px;
      cursor: pointer;

      &.on {
        color: #1c55d1;

        .line {
          display: block !important;
        }
      }
    }

    .line {
      width: 62px;
      height: 4px;
      border-radius: 10px;

      background: #1c55d1;
      margin: 0 auto;
      margin-top: 16px;
      display: none;
    }
  }
}

.nr-box {
  background: #fff;
  border-radius: 8px;
  padding: 0 20px;

  .list {
    padding: 26px 0 74px 0;
    display: flex;
    border-bottom: 1px solid #d8d8d8;
    &:last-child {
      border-bottom: none;
    }
    .aj_msg {
      display: flex;
      width: 26%;
      margin-right: 30px;
      .jiao {
        width: 49px;
        height: 49px;
        line-height: 49px;
        border-radius: 8px;
        background: #f2f4f7;
        font-size: 24px;
        color: #999999;
        position: relative;
        text-align: center;

        .new {
          position: absolute;
          top: -6px;
          right: -6px;
          width: 15px;
          height: 15px;
          border-radius: 5px;
          background: #ffd6d8;
          font-size: 12px;
          color: #e41d00;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .name {
        margin-left: 22px;
        flex: 1;

        .title {
          font-size: 14px;
          color: #3d3d3d;
          font-weight: 500;
          line-height: 20px;
        }

        .text {
          font-size: 14px;
          color: #44567c;
          margin: 8px 0;
        }

        .label {
          display: flex;
        }
      }
    }
    .progress {
      display: flex;
      flex: 1;
      .box {
        display: flex;
        position: relative;
        width: 31%;
        &:last-child {
          width: auto;
        }
        &.on {
          .text_t {
            color: #1c55d1;
          }
          .line {
            width: 20%;
            background: #1c55d1;
          }
        }
      }
      .node {
        text-align: center;
        width: 100px;
        .time-line {
          position: absolute;
          top: 100px;
          left: -28px;
          display: flex;
          font-size: 14px;
          div {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
            p {
              &:first-child {
                color: #999999;
              }
            }
          }
          img {
            width: 7px;
            height: 50px;
          }
        }
        .text_t {
          font-size: 14px;
          color: #333;
          margin-bottom: 10px;
        }
        .node-icon1 {
          width: 60px;
          height: 60px;
        }
        .node-icon2 {
          width: 52px;
          height: 52px;
        }
      }
      .line-c-box {
        width: 87%;
        position: absolute;
        left: 101px;
      }
      .line-box {
        width: 100%;
        height: 5px;
        background: #e8e8e8;
        position: relative;
        left: -26px;
        top: 50px;
        .line {
          position: absolute;
          height: 5px;
          left: 0;
          top: 0;
        }
        .text {
          width: 100%;
          text-align: center;
          position: absolute;
          top: -20px;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
.gn-box {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
  .box {
    width: 40%;
    background: #fff;
    border-radius: 8px;
    height: 217px;
    .title {
      margin: 20px 28px;
      font-size: 16px;
      font-weight: 500;
      color: #3d3d3d;
    }
    .icon-box {
      display: flex;
      justify-content: space-around;
      margin-top: 40px;
      cursor: pointer;
      img {
        width: 61px;
        height: 61px;
        margin-bottom: 10px;
      }
      p {
        font-size: 14px;
        color: #3d3d3d;
      }
    }
  }
  .tips {
    width: 58%;
    .tips-box {
      margin: 56px 28px 0 28px;
      display: flex;
      justify-content: space-between;
      img {
        width: 56px;
        height: 56px;
      }
      & > div {
        display: flex;
        align-items: center;
        cursor: pointer;
        div {
          height: 56px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 9px;
          .num {
            font-size: 24px;
            color: #333333;
          }
          .text {
            color: #666666;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.tj-box {
  padding: 20px 25px;
  background: #fff;
  border-radius: 8px;
  height: auto;
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    img {
      width: 26px;
      height: 26px;
    }
    p {
      margin-left: 10px;
      font-size: 16px;
      color: #3d3d3d;
    }
  }
  .tab{
    display: inline-block;
    margin-top:24px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #DBDBDB;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    color: #3290F7;
    margin-bottom:20px;
    p{
      display: inline-block;
      width: 80px;
      cursor: pointer;
      &.on{
        background: #3290F7;
        border-radius: 8px;
        color:#fff;
      }
    }
    
  }
  .charts {
    height: 300px;
  }
}

</style>
  